<template>
  <div class="pane">
    <div class="pane_left">
      <a-form-model layout="inline" labelAlign="left">
        <div class="pane_left_top">
          <a-row :gutter="24">
            <a-col :md="12" :sm="24">
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="编号">
                <a-input placeholder="请输入" v-model="from.code" />
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级编号">
                <a-input placeholder="请输入" v-model="from.sjcode" />
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模型名称">
                <a-input placeholder="请输入" v-model="from.modelname" />
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否启用">
                <a-radio-group :options="plainOptions" :default-value="1" v-model="from.isqy" />
              </a-form-model-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <a-form-model-item label="备注" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }">
                <a-textarea :auto-size="{ minRows: 3, maxRows: 4 }" placeholder="请输入" v-model="from.bz" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>

        <div class="pane_left_btm">
          <a-button type="primary" icon="plus-circle">主条件</a-button>
          <div class="pane_left_btm_table">
            <a-table
              :pagination="false"
              :data-source="tableData"
              bordered
              :row-selection="{ onChange: handleTableSelect }"
              :columns="columns"
            ></a-table>
          </div>
        </div>
      </a-form-model>
      <div></div>
    </div>
    <div class="pane_right">
      <div class="panel_title">分析科目</div>
      <div class="kmfx">
        <a-select allowClear placeholder="分析科目" style="width: 60%; margin-top: 10px; align-self: center">
          <a-select-option :value="item.value" v-for="item in companyList" :key="item.id">{{
            item.label
          }}</a-select-option>
        </a-select>
        <div class="tree_list">
          <a-tree checkable :tree-data="treeData" @select="handleMenuTreeSelect"></a-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import columns from './mxszColumns'
export default {
  name: 'mxsz',
  data() {
    return {
      from: {},
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      plainOptions: [
        { label: '启用', value: 1 },
        { label: '停用', value: 0 },
      ],
      columns,
      tableData: [
        {
          left: '',
          zdname: '开始时间',
          tj: '=',
          value: '2021-10-1',
          right: '',
        },
        {
          left: '',
          zdname: '结束时间',
          tj: '=',
          value: '2021-10-19',
          right: '',
        },
        {
          left: '',
          zdname: '累计金额',
          tj: '>',
          value: '300,000',
          right: '',
        },
      ],
      companyList: [],
      treeData: [
        {
          title: '现金',
          key: '0-0',
          children: [
            {
              title: '0-0-0',
              key: '0-0-0',
            },
            {
              title: '0-0-1',
              key: '0-0-1',
            },
            {
              title: '0-0-2',
              key: '0-0-2',
            },
          ],
        },
        {
          title: '银行存款',
          key: '0-1',
          children: [
            { title: '0-1-0-0', key: '0-1-0-0' },
            { title: '0-1-0-1', key: '0-1-0-1' },
            { title: '0-1-0-2', key: '0-1-0-2' },
          ],
        }
      ],
    }
  },
  methods: {
    handleTableSelect(selectedRowKeys, selectedRows) {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
    },
    handleMenuTreeSelect(selectedKeys, e) {
      e.node.onExpand()
    },
  },
  computed: {
    // rowSelection() {
    //   return {
    //     onChange: (selectedRowKeys, selectedRows) => {
    //       console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
    //     },
    //     getCheckboxProps: (record) => ({
    //       props: {
    //         disabled: record.name === 'Disabled User', // Column configuration not to be checked
    //         name: record.name,
    //       },
    //     }),
    //   }
    // },
  },
}
</script>

<style lang="less" scoped>
.pane {
  display: flex;
  &_left {
    // padding: 20px;
    border-right: 1px solid #dcedfe;
    height: 70vh;
    flex: 3;
    &_top {
      background-color: #f9faff;
      height: 200px;
      border-bottom: 1px solid #dcedfe;
      padding: 10px 20px;
    }
    &_btm {
      margin: 20px;
      &_table {
        margin-top: 15px;
      }
    }
  }
  &_right {
    flex: 1;
  }
  /deep/ .ant-form-item {
    margin-top: 5px;
    width: 100%;
  }
}
.kmfx {
  display: flex;
  flex-flow: column;
  // align-items: center;
  .tree_list {
    margin-top: 10px;
    // /deep/.ant-tree-checkbox{
    //     left: 240px;
    // }
  }

}
</style>